Select country
<select id="country">
        <option value="0">Pick one</option>
    {foreach from=$countries item=c}
        <option value="{$c.Country_id}">{$c.Country}</option>
    {/foreach}
</select>
<br />

Select county
<select id="county">
</select>
<br />

Add city
<input type="text" name="city" id="city" /><br />
Population
<input type="text" name="population" id="city_add_population" /><br />
Percent male
<input type="text" name="city" id="city_add_male" /><br />
Urban
<select id="city_add_urban">
    <option value="1">Yes</option>
    <option value="0">No</option>
</select><br />

<input type="button" value="Add city" id="city_add">

<div id="city_list"></div>

<div id="city_modify_container" style="display: none;">
    <div id="city_modify">
        <input type="hidden" name="city_modify_id" id="city_modify_id" value="" /> <br />
        City name <input type="text" name="city_modify_name" id="city_modify_name" value="" /> <br />
        Population <input type="text" name="city_modify_population" id="city_modify_population" value="" /> <br />
        Percent male<input type="text" name="city_modify_male" id="city_modify_male" value="" /> <br />
        Urban 
            <select name="city_modify_urban" id="city_modify_urban">
                <option value="0">No</option>
                <option value="1">Yes</option>
            </select><br />
        <input type="submit" id="city_modify_button" value="Save" /> <br />
    </div>
</div>

<script>
$(document).ready( function()
{
    $('#country').change( function( e )
    {
        var country = $('#country').val();
        if ( country > 0 )
        {
            var p = 'country_id=' + encodeURIComponent( country );
            $.post(
                '/location/county-list-ajax',
                p,
                function( s, t )
                {
                    if ( s['error'] == 'OK' )
                    {
                        if ( s['data']['counties'] )
                        {
                            $('#county > option').remove();
                            for( i = 0 ; i < s['data']['counties'].length ; i++ )
                            {
                                var option_item = $('<option></option>').val( 
                                        s['data']['counties'][i]['County_id'] 
                                        ).text( 
                                            s['data']['counties'][i]['County'] 
                                        );
                                $('#county').append( option_item );   
                            }
                            cities_refresh();
                        }
                    }
                },
                'json'
            );
        }
    } );

    function cities_events()
    {
        $('.city_modify').fancybox(
            {
                onStart : function( e )
                {
                    $('#city_modify_id').val( $( e ).attr( 'data-id' ) );
                    $('#city_modify_population').val( $( e ).attr( 'data-population' ) );
                    $('#city_modify_male').val( $( e ).attr( 'data-percent-male' ) );
                    $('#city_modify_urban').val( $( e ).attr( 'data-urban' ) );
                    $('#city_modify_name').val( $( e ).attr( 'data-name' ) );
                }
            } );
        $('#city_modify_button').click ( function ()
        {
            var city_id = $('#city_modify_id').val();
            var city_name = $('#city_modify_name').val();
            var city_population = $('#city_modify_population').val();
            var city_male = $('#city_modify_male').val();
            var city_urban = $('#city_modify_urban').val();

            var p = 'city_name=' + encodeURIComponent( city_name ) +
                    '&city_id=' + encodeURIComponent( city_id ) +
                    '&city_population=' + encodeURIComponent( city_population ) +
                    '&city_male=' + encodeURIComponent( city_male ) +
                    '&city_urban=' + encodeURIComponent( city_urban );

            if ( city_name )
            {
                $.post( 
                    '/location/city-modify',
                    p,
                    function()
                    {
                        $.fancybox.close();
                        cities_refresh();
                    },
                    'json'
                );
            }
        } );

        $('.city_delete').click( function()
        {
            var city_id = $(this).attr('data-id');

            var p = 'city_id=' + encodeURIComponent( city_id );

            if ( city_id )
            {
                $.post( 
                    '/location/city-delete',
                    p,
                    function()
                    {
                        cities_refresh();
                    },
                    'json'
                );
            }
        } );
    }

    function cities_refresh()
    {
        $('#city_list').block( { message: 'Please wait...' } );
        var county = $('#county').val();
        
        var p = 'county=' + encodeURIComponent( county );
        
        $.post( 
            '/location/city-list',
            p,
            function( s, t )
            {
                if ( s['error'] == 'OK' )
                {
                    if ( s['data']['cities_html'] )
                    {
                        $('#city_list').html( s['data']['cities_html']  );
                        cities_events();
                        $('#city_list').unblock();
                    }
                }
            },
            'json'
        );
    }

    $('#county').change( cities_refresh );

    $('#city_add').click( function()
    {
        var city_name = $('#city').val();

        var p = 'city=' + encodeURIComponent( city_name ) +
                '&county=' + encodeURIComponent( $('#county').val() ) +
                '&population=' + encodeURIComponent( $('#city_add_population').val() ) +
                '&male=' + encodeURIComponent( $('#city_add_male').val() ) +
                '&urban=' + encodeURIComponent( $('#city_add_urban').val() );

        $.post( 
            '/location/city-add',
            p,
            function()
            {
                cities_refresh();
            }
        );
    } );
} );
</script>